<template>
    <el-row class="header_login">
        <el-col :span="24">
            <el-row justify="space-between" align="middle">
                <el-image style="width: auto; height: auto;" :src="imgUrl" />
                <el-input v-model="commodityName" style="width: 30%;height: 50%;margin-right: 2%;"
                    placeholder="搜索商品..." size="large">
                    <template #append>
                        <el-button :icon="Search" @click="searchCommodity" />
                    </template>
                </el-input>
            </el-row>
        </el-col>
    </el-row>
    <el-row style="padding: 2%;">
        <el-col :span="24">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item to="/">返回</el-breadcrumb-item>
                <el-breadcrumb-item>
                    {{ commodity?.commodityName }}
                </el-breadcrumb-item>
            </el-breadcrumb>
        </el-col>
    </el-row>
    <el-row class="commodity_body">
        <el-col :span="10" align="middle">
            <el-image :src="gimgUrl" style="width: 60%;"></el-image>
        </el-col>
        <el-col :span="14">
            <el-row type="flex" align="middle">
                <el-col :span="24">
                    <el-text style="font-size: xx-large;font-weight: bold;"> {{ commodity?.commodityName
                        }}</el-text>
                    <el-tag type="primary" size="large" style="margin-left: 1%">{{ commodity?.type }}</el-tag>
                </el-col>
                <el-col :span="24" style="margin-top: 1%;">
                    <el-text style="font-size: medium;font-weight: bold;color: gray;">
                        {{ commodity?.description }}
                    </el-text>
                </el-col>
                <el-col :span="23" style="background-color: gainsboro;padding: 2%; margin-top: 1%;">
                    <el-text style="font-size: x-large;font-weight: bold;color: red;">价格</el-text>
                    <el-text style="font-size: xx-large;font-weight: bold;color: red;"> ¥ {{ commodity?.price
                        }}</el-text>
                </el-col>
                <el-col :span="23">
                    <el-divider />
                </el-col>
                <el-col :span="24" style="margin-top: 1%;">
                    <el-text style="font-size: medium;"> 商品编码： {{ commodity?.gid }}</el-text>
                </el-col>
                <el-col :span="24" style="margin-top: 1%;">
                    <el-text style="font-size: medium;"> 上市时间： {{
                        commodity?.createTime
                        }}</el-text>
                </el-col>
                <el-col :span="12" style="margin-top: 1%;">
                    <el-text style="font-size: medium;"> 出售方： {{ commodity?.store?.name }}</el-text>
                </el-col>
                <el-col :span="12" style="margin-top: 1%;">
                    <el-text style="font-size: medium;"> 地址： {{ commodity?.store?.address }}</el-text>
                </el-col>
                <el-col :span="23">
                    <el-divider />
                </el-col>
                <el-col :span="24">
                    <el-text style="font-size: medium;"> 已选择商品：</el-text>
                    <el-text style="font-size: medium;color: red;"> {{ commodity?.commodityName }}</el-text>
                </el-col>
                <el-col :span="24" style="margin-top: 1%;">
                    <el-text style="font-size: medium;"> 数量：</el-text>
                    <el-input-number v-model="count" :min="0" :max="commodity?.count" @change="handleChange" />
                    <el-text style="font-size: medium;"> ( 库存：{{ commodity?.count }} 件)</el-text>
                </el-col>
                <el-col :span="24" style="margin-top: 7%;">
                    <el-button type="danger" plain style="width: 20%;padding: 3%;" @click="pay">立即购买(¥{{
                        price }})</el-button>
                    <el-button type="warning" plain style="width: 20%;padding: 3%;" @click="addCarts">加入购物车</el-button>
                </el-col>
                <el-col :span="24" style="margin-top: 2%;">
                    <el-text style="font-size:small;color: gray;">
                        温馨提示 提前设置默认收货地址，购买更顺利~
                    </el-text>
                </el-col>
            </el-row>
        </el-col>
        <el-backtop :bottom="100" :right="20" style="
        height: 60px;
        width: 60px;
        background-color: #fbaf5a;
        box-shadow: var(--el-box-shadow-lighter);
        text-align: center;
        line-height: 30px;
        color: #ffffff;
        border-radius: 50px;
      ">
        </el-backtop>
        <el-dialog v-model="dialogVisible" title="提示" width="500" :before-close="handleClose">
            <span>请先登陆！</span>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="dialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="goLogin">
                        登入
                    </el-button>
                </div>
            </template>
        </el-dialog>
    </el-row>
    <el-row justify="center" align="middle" style="margin-top: 5%;">
        <el-col :span="22">
            <el-divider content-position="center">
                <el-text style="font-size: large;font-weight: bold;">
                    为您推荐以下商品
                </el-text>
            </el-divider>
        </el-col>
        <el-col :span="22" style="margin-bottom: 5%;">
            <el-space wrap fill-ratio="10" fill>
                <div v-for="item in commodities" :key="item.gid">
                    <el-card shadow="hover" style="width: 250px;height: 400px;border-radius: 15px;margin-top: 5%;"
                        @click="goCommodity(item!.gid!)">
                        <el-row align="middle" justify="center">
                            <el-col :span="24">
                                <el-image :src="`/api/image/${item.image!.url!}`" style="width: 100%;height: 200px;"
                                    fit="contain" />
                            </el-col>
                            <el-col :span="24" align="start">
                                <el-text style="font-size: larger;" line-clamp="1">{{ item.commodityName }}</el-text>
                            </el-col>
                            <el-col :span="24" align="start">
                                <el-text style="color: gray;height: 60px;" line-clamp="3">{{ item.description }}</el-text>
                            </el-col>
                            <el-col :span="24" align="end">
                                <el-text style="color: red;font-size: large;">¥ {{ item.price }}</el-text>
                            </el-col>
                            <el-col :span="24" style="margin-top: 5%;height: max-content;">
                                <el-row style="width: 100%;">
                                    <el-col :span="24" align="start">
                                        <el-text>浏览量：{{ item.browse }}</el-text>
                                        <el-text style="margin-left: 10%;">评分：{{ item.point }}</el-text>
                                    </el-col>
                                </el-row>
                            </el-col>
                        </el-row>
                    </el-card>
                </div>
            </el-space>
        </el-col>
    </el-row>
</template>


<script lang="ts" setup>
import { onMounted, ref } from 'vue'
import { Search } from '@element-plus/icons-vue';
import { imgUrl } from '../assets/common/constants.ts';
import { useRoute, useRouter } from 'vue-router';
import { addMCarts, browse, queryCommodityByGid, recommendCommodity } from '../assets/net/NetUtils.ts';
import { CartsModel } from '../assets/model/Carts.ts';
import { ElMessage, ElMessageBox } from 'element-plus';
import { agcAuth } from '../assets/agc/auth.ts';
import { CommodityModel } from '../assets/model/Commodity.ts';

const router = useRouter();
const route = useRoute();
const gimgUrl = ref<string>();
const commodityName = ref<string>();
const commodity = ref<CommodityModel>();
const commodities = ref<Array<CommodityModel>>();
const count = ref<number>(0)
const price = ref<number>(0)

const dialogVisible = ref<boolean>(false)

onMounted(() => {
    let gid: number = Number(route.query.gid);
    queryCommodityByGid(gid)
        .then((value: CommodityModel) => {
            commodity.value = value
            gimgUrl.value = `/api/image/${value?.image?.url}`
            browse(gid)
        })
    recommendCommodity()
        .then((value) => {
            commodities.value = value.data
        })
})

const goCommodity = (gid: number) => {
    router.push({
        path: '/commodity',
        query: {
            gid: gid
        }
    })
        .then(() => {
            location.reload()
        })
}

const handleClose = (done: () => void) => {
    ElMessageBox.confirm('关闭提示？')
        .then(() => {
            done()
        })
        .catch(() => {
            // catch error
        })
}

const goLogin = () => {
    dialogVisible.value = false;
    router.push({
        path: "/login"
    })
}

const handleChange = (value: number) => {
    if (commodity.value) {
        count.value = value;
        price.value = value * commodity.value.price
    }
}

const addCarts = () => {
    agcAuth.getCurrectUser().then((user) => {
        if (user && commodity.value) {
            if (count.value <= 0) {
                ElMessage.warning('请至少选择1件商品！')
            } else {
                if (commodity.value.gid) {
                    let mCarts: CartsModel = {
                        gid: commodity.value.gid,
                        uid: user.getUid(),
                        count: count.value,
                        price: price.value!,
                        status: 1
                    }
                    addMCarts(mCarts)
                        .then((value) => {
                            if (value === 200) {
                                ElMessage.success('商品成功添加购物车')
                            }
                        })
                }
            }
        } else {
            dialogVisible.value = true;
        }
    })
}

const pay = () => {
    agcAuth.getCurrectUser().then((user) => {
        if (user) {
            if (count.value <= 0) {
                ElMessage.warning('请至少选择1件商品！')
            } else {
                if (commodity.value) {
                    router.push({
                        path: "/order",
                        query: {
                            gid: commodity.value.gid,
                            count: count.value,
                            price: price.value!,
                            way: 1
                        }
                    })
                }
            }

        } else {
            dialogVisible.value = true;
        }
    })
}


const searchCommodity = () => {
    router.push({
        path: '/search',
        query: {
            way: 0,
            arg: commodityName.value
        }
    })
}
</script>
<style>
.commodity_body {
    height: 100%;
    width: 100%;
}

.header_login {
    width: 100%;
    height: 90px;
    background-color: #fbaf5a;
    padding: 20px;
}
</style>